<template style="position: relative;">
  <view>
    <!-- 头部标题 -->
    <my-navbar :custom="false" title="寻活动" :autoBack="false"></my-navbar>
	<view class="container">
    <!-- 筛选和搜索区域 -->
    <view class="filter-search">
      <!-- 地区下拉选择 -->
      <view class="area-select" @click="clickArea">
        <text class="area-text">{{ currentArea }}</text>
        <u-icon name="arrow-down" size="24"></u-icon>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <u-icon name="search" size="28" color="#999"></u-icon>
        <input 
          class="search-input" 
          type="text" 
          placeholder="输入活动随便关键词" 
          v-model="searchKey"
          @confirm="searchActivity"
        >
      </view>

      <!-- 查找按钮 -->
      <button class="search-btn" @click="searchActivity">查找</button>
    </view>

    <!-- 活动列表 -->
    <view class="activity-list">
      <view 
        class="activity-item" 
        v-for="(activity, index) in activityList" 
        :key="index" @click="handleDetailClick(activity, index)"
      >
	  <!-- 1. 图片区域（居上，固定尺寸裁剪） -->
	        <view class="activity-img-container">
	          <image class="activity-img" :src="activity.bigImageList[0].imageurl || '/static/index/store.png'"  mode="cover"></image>
	          
	          <text 
	            class="activity-status" 
	            :class="activity.status === '1' ? 'status-publishing' : 'status-ended'"
	          >
	            {{ activity.status === '1' ? '发布中' : '已结束' }}  <!-- 状态文字转中文，更直观 -->
	          </text>
	        </view>
			
		<!-- 2. 文本区域（居下，分层布局） -->
			  <view class="activity-text-container">
				<!-- 标题：优先级最高，突出显示 -->
				<text class="activity-desc">{{ activity.eventtitle }}</text>
				
				<!-- 辅助信息：地点+时间横向排列，节省纵向空间 -->
				<view class="activity-meta">
				  <view class="meta-item">
					<!-- 加图标增强信息识别度（需引入uView图标库，或用图片替代） -->
					<u-icon name="star" size="22" color="#666" class="meta-icon"></u-icon>
					<text class="activity-location">{{ activity.detailedaddress }}</text>
				  </view>
				  <view class="meta-item">
					<u-icon name="clock" size="22" color="#666" class="meta-icon"></u-icon>
					<text class="activity-time">{{ activity.starttime }}~{{ activity.endtime }}</text>
				  </view>
				</view>
			  </view>
	  
	  
        <!-- <image class="activity-img" :src="activity.bigImageList[0].imageurl" mode="widthFix" @click="handleDetailClick(activity, index)"></image>
        <text class="activity-status" :class="activity.status === '0' ? 'status-publishing' : 'status-ended'">
          {{ activity.status }}
        </text>
        <text class="activity-desc">{{ activity.eventtitle }}</text>
        <text class="activity-location">{{ activity.detailedaddress }}</text>
        <text class="activity-time">{{ activity.starttime }}~{{ activity.endtime }}</text> -->
      </view>
    </view>
	</view>
	<!-- 底部一言区域 -->
	<view class="ont-toke" :style="{top: oneTokeMarginTop +'rpx;' }">
		<u--text :bold="false" size="24" color="#353535" align="center" :text='oneToke' />
	</view>
	
	<my-tabbar></my-tabbar>
	
	<view>
	<!-- 地区选择弹窗 -->
	<u-popup 
	  :show ="showAreaPopup" 
	  @close="closeArea"
	>
	  <view class="area-popup">
	    <view class="popup-title">选择地区</view>
	    <view 
	      class="area-item" 
	      v-for="(area, index) in areaList" 
	      :key="index"
	      @click="selectArea(area)"
	    >
	      <text>{{ area }}</text>
	    </view>
	  </view>
	</u-popup>
	</view>
	
  </view>
</template>

<script>
	import {
		getActivity,
	} from '@/config/api.js'
export default {
  data() {
    return {
      areaList: ['全国', '北京', '上海', '广州', '深圳', '其他省市...'], // 模拟地区列表，实际可从后端获取
      currentArea: '全国', // 当前选中地区
      showAreaPopup: false, // 地区选择弹窗显示状态
      searchKey: '运动', // 搜索关键词
      activityList: [
        
      ] // 活动列表数据
      
    };
  },
  methods: {
    searchActivity() {
      this.getActivityList();
    },
	async getActivityList() {
		const {
		data: res
		} = await getActivity({
			province: this.currentArea,
			eventcontent:this.searchKey
		})
		console.log(res)
	
		this.activityList = res.rows
		console.log(this.activityList)
	},
	clickArea() {
		this.showAreaPopup = true;
		console.log("点击地区按钮")
	},
	closeArea() {
		this.showAreaPopup = false;
		console.log("关闭地区按钮")
	},
    selectArea(area) {
      this.currentArea = area;
      this.showAreaPopup = false;
      // 可在此处添加地区切换后，重新请求活动列表等逻辑
    },
	// 点击查看详情事件
	handleDetailClick(item,index) {
		console.log('点击了第', index + 1, '查看详情',item );
		console.log(item.status)	
		if(item.status == 'X'){
			uni.showToast({
				title: '已结束，不能参加', // 错误信息
				icon: 'fail', // 不显示图标（默认是success图标）
				duration: 3000, // 显示时长（毫秒）
				position: 'center' // 显示位置（center/top/bottom）
				});
		} else {
			const jsonStr = encodeURIComponent(JSON.stringify(item));
			console.log(jsonStr)
			uni.navigateTo({ url: '/other_pages/venueDetail/venueDetail?queryObj='+jsonStr });	
		}
	}
  },
  onLoad(options) {
    // 初始化处理
	this.searchKey='';
    this.activityList = []; // 清空列表
    // this.getActivityList();
    // 判断参数是否存在且不为空
    // if (options && options.queryObj) {
    //   try {
    //     // 参数非空：解码并解析
    //     const jsonStr = decodeURIComponent(options.queryObj);
    //     // 可选：判断解码后的字符串是否为空
    //     if (jsonStr.trim() !== '') {
    //       const queryData = JSON.parse(jsonStr);
    //       console.log('收到有效参数：', queryData);
          
    //       // 处理非空参数（例如保存到数据中）
    //       this.searchKey = queryData;
          
    //       // 带参数请求列表
    //       this.getActivityList(); // 可将参数传递给接口请求
    //     } else {
    //       // 参数为空字符串的处理
    //       console.log('参数为空字符串，使用默认条件请求');
    //       this.getActivityList(); // 无参数请求
    //     }
    //   } catch (error) {
    //     // 解析失败的容错处理
    //     console.error('参数解析失败：', error);
    //     uni.showToast({
    //       title: '参数格式错误',
    //       icon: 'none'
    //     });
    //     // 解析失败仍请求默认数据
    //     this.getActivityList();
    //   }
    // } else {
    //   // 参数完全为空的处理
    //   console.log('未收到参数，使用默认条件请求');
    //   this.getActivityList(); // 无参数请求
    // }
  },
  onShow() {
    // 从缓存读取参数
    const params = uni.getStorageSync('searchKey');
    if (params) {
      console.log('tabBar主页接收的参数：', params);
	  this.searchKey=params;
      // 处理完参数后清除缓存（避免下次进入还能读到）
      uni.removeStorageSync('searchKey');
    }
	this.getActivityList();
	
  },
  onReady() {
		console.log("onReady---------")
		this.searchKey=''
	}
};
</script>

<style scoped>

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.filter-search {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;
}

.area-select {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}

.area-text {
  font-size: 28rpx;
  margin-right: 8rpx;
}

.area-popup {
  padding: 24rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  text-align: center;
}

.area-item {
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0; /* 浅灰色边框，2rpx确保清晰可见 */
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); /* 轻微阴影增强立体感 */
}

.search-input {
  flex: 1;
  height: 64rpx;
  font-size: 28rpx;
  /* 去除输入框默认边框和内阴影 */
    border: none;
    outline: none;
    background: transparent;
}

/* 可选：聚焦时边框变色，增强交互反馈 */ 
.search-box:focus-within {   
	border-color: #35a5ed; /* 聚焦时变为主题色边框 */ 
}

.search-btn {
  background-color: #007AFF;
  color: #fff;
  font-size: 28rpx;
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  margin-left: 24rpx;
}

/* 列表容器：纵向排列，项间距15rpx，背景区分 */
.activity-list {
  padding: 15rpx;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

/* 单个活动卡片：白色背景+圆角+阴影，整体规整 */
.activity-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;  /* 裁剪图片和文本，避免超出圆角 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);  /* 轻微阴影提升层次 */
}

/* 图片容器：固定宽高比，控制图片显示区域 */
.activity-img-container {
  position: relative;  /* 用于定位状态标签 */
  width: 100%;
  height: 440rpx;  /* 固定图片高度，根据需求调整（如280rpx） */
}

/* 图片：固定尺寸裁剪，避免变形 */
.activity-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 核心：图片按比例填充容器，多余部分裁剪 */
}

/* 状态标签：悬浮在图片右上角，半透明背景不遮挡图片 */
.activity-status {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;  /* 圆角标签更美观 */
  font-size: 22rpx;
  font-weight: 500;
  z-index: 1;  /* 确保在图片上方显示 */
}

/* 发布中状态样式 */
.status-publishing {
  background-color: rgba(255, 243, 205, 0.9);
  color: #d4a72c;
}

/* 已结束状态样式 */
.status-ended {
  background-color: rgba(248, 215, 218, 0.9);
  color: #c9302c;
}

/* 文本容器：内边距+分层间距，避免文本贴边 */
.activity-text-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;  /* 标题与辅助信息的间距 */
}

/* 活动标题：加粗放大，长文本换行省略 */
.activity-desc {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  /* 标题最多2行，超出显示省略号（避免纵向拉伸） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 辅助信息容器：地点+时间横向排列 */
.activity-meta {
  display: flex;
  justify-content: space-between;
  gap: 10rpx;  /* 两项之间的间距，避免拥挤 */
}

/* 单个辅助信息项：图标+文本对齐 */
.meta-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
  /* 文本单行省略，避免横向溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 辅助信息图标：与文本间距8rpx，固定大小不压缩 */
.meta-icon {
  margin-right: 8rpx;
  flex-shrink: 0;
}

.ont-toke {
		position: absolute;
		left: 40rpx;
		right: 40rpx;
		// width: 100%;
		// padding: auto 40rpx;
		// text-align: center;
		// font-size: 24rpx;
		// color: #353535;
		// background-color: #4CD964;
		// margin-top: ;
		// size="24" color="#353535";

	}

</style>